<script setup lang="ts">
import ArticelItem from './articel-item.vue'
import useArticel from '../composition/useArticel'
import { ref } from 'vue'
import { showFailToast } from 'vant'

const { id, userId } = defineProps<{ id?: number; userId?: number }>()
const { getArticelList, articelList } = useArticel()

const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const lazyArticelList = ref<ArticelModel[]>([])

const onLoad = () => {
   if (refreshing.value) {
      lazyArticelList.value = []
      refreshing.value = false
   }

   getArticelList(id, page.value, userId)
      .then((res) => {
         loading.value = false
         lazyArticelList.value = [...lazyArticelList.value, ...articelList.value!.data]
         page.value = page.value + 1
         if (articelList.value!.data.length <= 0) finished.value = true
      })
      .catch((err) => {
         return showFailToast('出错了')
      })
}

const onRefresh = async () => {
   page.value = 1
   finished.value = false
   loading.value = true
   onLoad()
}
</script>

<template>
   <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <van-list v-model:loading="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
            <van-cell v-for="item in lazyArticelList">
               <ArticelItem :articel="item" />
            </van-cell>
         </van-list>
      </van-pull-refresh>
   </div>
</template>

<style lang="scss" scoped>
::v-deep .van-cell__value {
   text-align: left;
}

::v-deep .van-cell {
   margin-bottom: 5px;
}
</style>
